<template v-cloak>
  <view class="label-container">
    <!--  <view class="sku">
      <scroll-view
        scroll-x
        class="bg-white nav"
        scroll-with-animation
        :scroll-left="scrollLeft"
      >
        <view
          class="cu-item"
          :class="index == current ? 'text-green cur' : ''"
          v-for="(item, index) in list"
          :key="item.id"
          @click="tabSelect(item, index)"
          :data-id="item.id"
        >
          {{ item.title }}
        </view>
      </scroll-view>
    </view> -->

    <view class="article-list mar10" v-if="labelArticleList.length">
      <view
        class="item br10"
        v-for="(v, i) in labelArticleList"
        :key="v.id"
        @click="HandleView(v.id)"
      >
        <view class="a-title t2">
          {{ v.title }}
        </view>
        <view class="nav-item">
          <view
            class="cover br10"
            :style="{ backgroundImage: 'url(' + v.cover + ')' }"
          >
          </view>
          <view class="info">
            <view class="title t2">
              {{ v.content }}
            </view>
            <view class="tag-list flex">
              <view
                class="padding-md"
                v-for="(item, index) in v.label_list"
                :key="index"
              >
                <view class="cu-tag sm light bg-purple">{{ item.title }}</view>
              </view>
            </view>
            <view class="tag-time flex-between">
              <view class="eye"> {{ v.view_num }}阅读 </view>

              <view class="time"> {{ v.create_at }} </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="no-data" v-else>
      <image src="/static/inbetweening/no-data.png" mode="widthFix"></image>
      <view class="title"> 暂无内容 </view>
    </view>
    <u-back-top
      :scrollTop="scrollTop"
      bottom="40"
      :custom-style="{ background: 'transparent' }"
    >
      <view class="back-top-image">
        <image src="/static/icon/icon-back-top.png" mode="widthFix"></image>
      </view>
    </u-back-top>
    <ALoading v-show="aloading"></ALoading>
    <view :class="{ mask: aloading }" :catchtouchmove="aloading"></view>
    <u-no-network></u-no-network>
    <view class="no-more" v-if="labelArticleList[0]">
      <u-loadmore :status="status" font-size="24" :load-text="loadText" />
    </view>
  </view>
</template>

<script>
import ALoading from "../../../components/loading/loading.vue"
export default {
  components: { ALoading },
  data() {
    return {
      id: "",
      title: "",
      labelArticleList: [],
      scrollTop: 0,
      aloading: true,
      loadText: {
        nomore: "我也是有底线的",
      },
      // list: [],
      // current: 0,
    }
  },
  onPageScroll: function (e) {
    this.scrollTop = e.scrollTop
    if (e.scrollTop >= 80) {
      wx.setNavigationBarTitle({
        title: this.title,
      })
      wx.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffff",
        animation: {
          duration: 500,
          timingFunc: "easeIn",
        },
      })
    } else {
      wx.setNavigationBarTitle({
        title: this.title,
      })
      wx.setNavigationBarColor({
        frontColor: "#ffffff",
        backgroundColor: "#8486f8",
        animation: {
          duration: 500,
          timingFunc: "easeIn",
        },
      })
    }
  },
  onLoad(options) {
    this.title = options.title
    wx.setNavigationBarTitle({
      title: options.title,
    })
    this.id = options.id
    // this.current = Number(options.id) - 1
    this.getItem(options.id)
  },
  // onShow() {
  //   this.getList()
  //   this.getItem(this.id)
  // },
  methods: {
    // tabSelect(item, index) {
    //   this.current = index
    //   this.getItem(item.id)
    // },
    getItem(id) {
      this.$store.dispatch("label/item", { id: id }).then(res => {
        // console.log(res)
        this.labelArticleList = res
        this.aloading = false
      })
    },
    // getList() {
    //   this.$store.dispatch("label/list").then(res => {
    //     console.log(res)
    //     this.list = res.data
    //   })
    // },
    HandleView(id) {
      let avatar = uni.getStorageSync("avatar")
      if (!avatar) {
        uni.navigateTo({
          url: "/pages/login/login",
        })
        return
      }
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mar10 {
  margin: 20upx;
}
.sku {
  position: sticky;
  top: 0;
  left: 0;
}
</style>
